<template>
  <div class="login-container">
    <van-nav-bar title="首页" class="page-nav-bar"/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunbo" :key="item.id" >
        <img class="lbimg" :src="'http://124.223.14.236:8060/' + item.advimgsrc" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
  <van-grid :border="false" :column-num="3" :gutter="10">
      <van-grid-item v-for="item in zuixin" :key="item.id"  >
        <router-link to="/xiangq" @click.native="indexid(item.id)">
        <img class="csimg" :src="'http://124.223.14.236:8060/' + item.pic" alt="">
        <p class="bt">{{item.title}}</p>
         </router-link>
      </van-grid-item>
  </van-grid>
    <van-cell title="最近更新" size="large">
      <p>
        <span>24小时：</span><span>0篇/</span><span>1周：</span><span>0篇</span>
      </p>
    </van-cell>
  <Wenzhang @click.native="indexid(item.id)" v-for="item in wenzhang " :key="item.id" :title="item.title" :pic="item.pic" :lovenum="item.lovenum" :click="item.click"></Wenzhang>

  </div>
</template>

<script>
import Wenzhang from "@/comp/Wenzhang.vue";
import {getindex,tuijian,hot} from '../api/index'
export default {
  components: { Wenzhang },
  data() {
    return {
      lunbo:[],
      
      wenzhang:[],
      zuixin:[],
     
    };
  },
created(){
  this.indexym()
  this.tjwz()
  this.zx()
},
methods:{
   indexid(idx){
     localStorage.setItem('ids',idx)
     window.location.reload();
  },
  async indexym(){
    try {
       let {data} =await getindex()
       console.log(data);
       this.lunbo=data.data.banner
    } catch (error) {
      console.log(error);
    }
  },
  async tjwz(){
    try {
       let {data} =await tuijian()
      //  console.log(data.data.list);
       this.wenzhang=data.data.list
    } catch (error) {
      console.log(error);
    }
  },
  async zx(){
    try {
       let {data} =await hot()
      //  console.log(data.data.list);
       this.zuixin=data.data.list
    } catch (error) {
      console.log(error);
    }
  },
 
}

};
</script>

<style scoped>
.goods-card {
  margin: 0;
  /* background-color: @white; */
}

.delete-button {
  height: 100%;
}
.my-bar {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #1989fa;
}

.lbimg {
  width: 100%;
  height: 100%;
}
.bt{
   font-size: 12px;
  display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 1; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.csimg{
  width: 90px;
  height: 90px;
}
</style>